import {
    generatorMenubar,
    generatoraChildMenubar
} from './sidebarTemplate';

import menuData from './data';

import {
    generatorChild
} from './childPageTemplate'




//click the li, addclass active.
const sidebarClickHandle = () => {
    document.getElementById("menu-bar").addEventListener("click", e => {
        document.querySelectorAll('#menu-bar>a').forEach(Element => {
            Element.classList.remove('active');
        });

        e.target.classList.add('active');
        let dataTarget = e.target.getAttribute('data');
        for (let obj of menuData) {
            if (dataTarget == obj.dataTarget) {
                generatorChild(obj.subitems, dataTarget, obj.id)
            }
        }
    })
}



const siderbarClickChildHandle=()=>{
    document.getElementById("grandList").addEventListener("click", e => {
        console.log(123)
    })
}

const viewSampleClickHandle = e => {
    let dataTarget = document.querySelector('#content>.title-content>h1').getAttribute('data-title');
    let dataTitle = e.target.getAttribute('data-title');
    generatoraChildMenubar(dataTarget, menuData, dataTitle);
    document.getElementsByClassName('container-fluid')[0] && document.getElementsByClassName('container-fluid')[0].classList.add('hide');
}

const sampleCodePanel = (e) => {
    document.getElementsByClassName('container-fluid')[0] && document.getElementsByClassName('container-fluid')[0].classList.remove('hide');
}

const initPage = () => {
    generatorMenubar(menuData);
    sidebarClickHandle();
    siderbarClickChildHandle();
    $('#myTab a').on('click', function (e) {
        e.preventDefault()
        $(this).tab('show')
    })
    document.querySelector('#menu-bar>a:first-child').click();
    document.getElementById('content').addEventListener('click', e => {
        if (e.target.classList.contains('view-sample')) {
            viewSampleClickHandle(e);
        }
    });
    document.getElementById('back').addEventListener('click', e => {
        sampleCodePanel(e)
    })
}

initPage();